<template>
  <div>
    <el-card shadow="never">
      <el-row>
        <el-col :span="20">
          <header-title title="位置管理"></header-title>
        </el-col>
        <el-col :span="3">

        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <el-tabs v-model="activeName" @tab-click="handleClickTabs" type="border-card">
        <el-tab-pane label="楼层设置" name="first">
          <p><el-button @click="addFloor" class="button" size="small" style="background: #409EFF;font-size: 14px;padding: 8px 10px;">添加楼层</el-button></p>
          <div>
            <el-table :data="floors.items" style="width: 100%">
              <el-table-column prop="number" label="区域数"></el-table-column>
              <el-table-column prop="marketName" label="所属商场"></el-table-column>
              <el-table-column prop="name" label="楼层名称"></el-table-column>
              <el-table-column prop="equipmentNumber" label="设备数"></el-table-column>
              <el-table-column prop="createdAt" label="添加时间"></el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button @click="editFloor(scope.row)" type="text" style="color:#3dc2c2;">编辑</el-button>
                  <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="removeFloor(scope.row)">
                    <el-button slot="reference" type="text" style="color:#f7674a;">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
              <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
            </el-table>
            <el-pagination
              :page-size="floors.perPage"
              :current-page="floors.currentPage"
              :total="floors.total"
              @current-change="floorsTableChangePage"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="区域设置" name="second">
          <p><el-button @click="addArea" class="button" size="small" style="background: #409EFF;font-size: 14px;padding: 8px 10px;">添加区域</el-button></p>
          <div>
            <el-table :data="areas.items" style="width: 100%">
              <el-table-column prop="name" label="区域名称"></el-table-column>
              <el-table-column prop="marketName" label="所属商场"></el-table-column>
              <el-table-column prop="parentName" label="所属楼层"></el-table-column>
              <el-table-column prop="equipmentNumber" label="设备数"></el-table-column>
              <el-table-column prop="createdAt" label="添加时间"></el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button @click="editArea(scope.row)" type="text" style="color:#3dc2c2;">编辑</el-button>
                  <el-popconfirm title="确定删除吗？" @onConfirm="removeArea(scope.row)">
                    <el-button slot="reference" type="text" style="color:#f7674a;">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
              <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
            </el-table>
            <el-pagination
              :page-size="areas.perPage"
              :current-page="areas.currentPage"
              :total="areas.total"
              @current-change="changePage1"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="新增" :visible.sync="addFloorModal.showAddFloorDialog">
      <div>
        <el-form :model="addFloorModal" label-width="100px" :rules="addrules" ref="addrules">
          <el-form-item label="楼层名称" prop="name">
            <el-input v-model="addFloorModal.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveFloor('addrules')">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增" :visible.sync="addAreaModal.showDialog" v-if="addAreaModal.showDialog">
      <div>
        <el-form :model="addAreaModal" label-width="100px" :rules="rules" ref="addAreaModal">
          <el-form-item label="所属楼层" prop="valueFloor">
            <el-select v-model="addAreaModal.valueFloor" placeholder="请选择">
              <el-option
                v-for="item in addAreaModal.floors"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域名称" prop="name">
            <el-input v-model="addAreaModal.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveArea('addAreaModal')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import store from '@/store'
export default {
  name: 'businessPublicScreen',
  components: {
     HeaderTitle
  },
  data(){
    return {
      marketId: -1,
      activeName: 'first',
      floors:{
        items:[],
        currentPage:1,
        hasMorPages: false,
        lastPage:1,
        perPage:10,
        total:0
      },
      areas:{
        items:[],
        currentPage:1,
        hasMorPages: false,
        lastPage:1,
        perPage:10,
        total:0
      },
      addFloorModal: {
        showAddFloorDialog: false,
        isEdit: false,
        name: '',
        posId: -1,
      },
      addAreaModal: {
        floors: [],
        showDialog: false,
        isEdit: false,
        name: '',
        valueFloor: null,
        posId: -1,
      },
       rules: {
        valueFloor: [
          { required: true, message: "请选择所属楼层", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入区域名称", trigger: "change" },
        ],
      },
      addrules: {
        name: [
          { required: true, message: "请输入楼层名称", trigger: "change" },
        ],
      },
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      if (val != oldVal && oldVal > 0){
        this.marketId = val
        this.getData(val)
      }
    }
  },
  mounted(){
    this.marketId = store.state.app.marketId
    this.getData(this.marketId)
  },
  methods:{
    fetchFloors(marketId){
      let type = 0
      this.$store.dispatch('position/fetchPositions', {marketId, type}).then(
        data => {
          this.floors = data
        }
      ).catch(err => {
        console.log("views-equipment-position-index.vue fetchFloors")
      })
    },
    fetchAreas(marketId){
      let type = 1
      this.$store.dispatch('position/fetchPositions', {marketId, type}).then(
        data => {
          console.log("areas", data)
          this.areas = data
        }
      ).catch(err => {
        console.log("views-equipment-position-index.vue fetchAreas")
      })
    },
    // 获取数据
    getData(marketId){
      this.fetchFloors(marketId)
      this.fetchAreas(marketId)
    },
    // 新增
    addFloor(){
      this.addFloorModal.showAddFloorDialog = true
    },
    // 编辑楼层信息
    editFloor(row){
      this.addFloorModal.showAddFloorDialog = true
      this.addFloorModal.isEdit = true
      this.addFloorModal.name = row.name
      this.addFloorModal.posId = row.posId
    },
    // 移除楼层信息
    removeFloor(row){
      let posId = row.posId
      let marketId = this.marketId
      this.$store.dispatch('position/deletePosition', {marketId, posId}).then(
        data => {
          this.fetchFloors(marketId)
        }
      ).catch(err => {
        console.log("views-equipment-position-index.vue removeFloor", err)
      })
    },
    floorsTableChangePage(){
      console.log('page')
    },
    handleChange(value) {
      console.log(value)
    },
    saveFloor(ruleForm){
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
      var name = this.addFloorModal.name
      var marketId = this.marketId

      if(!this.addFloorModal.isEdit){
        this.$store.dispatch('position/addNewFloor', {marketId, name}).then(
          data => {
            this.fetchFloors(marketId)
            this.addFloorModal.name = ""
            this.addFloorModal.posId = -1
          }
        ).catch(err => {
          console.log("views-equipment-position-index.vue fetchFloors")
        })
      } else if(this.addFloorModal.isEdit){
        let posId = this.addFloorModal.posId
        this.$store.dispatch('position/editFloor', {posId, marketId, name}).then(
          data => {
            this.fetchFloors(marketId)
            this.addFloorModal.name = ""
            this.addFloorModal.posId = -1
          }
        ).catch(err => {
          console.log("views-equipment-position-index.vue fetchFloors")
        })
      }
      this.addFloorModal.showAddFloorDialog = false
       } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    handleClickTabs(tab, event) {
      this.fetchFloorsSelector(this.marketId)
    },
    // 新增
    addArea(){
      this.addAreaModal.isEdit = false
      this.addAreaModal.showDialog = true
    },
    // 编辑
    editArea(row){
      this.addAreaModal.showDialog = true
      this.addAreaModal.isEdit = true
      this.addAreaModal.name = row.name
      this.addAreaModal.posId = row.posId
      this.addAreaModal.valueFloor = row.parentId
    },
    // 移除
    removeArea(row){
      let posId = row.posId
      let marketId = this.marketId
      this.$store.dispatch('position/deletePosition', {marketId, posId}).then(
        data => {
          this.fetchAreas(marketId)
        }
      ).catch(err => {
        console.log("views-equipment-position-index.vue removeFloor", err)
      })
    },
    saveArea(addAreaModal){
      var name = this.addAreaModal.name
      var marketId = this.marketId
      var parentId = this.addAreaModal.valueFloor

      console.log("parentId", parentId)
      this.$refs[addAreaModal].validate(valid => {
        if (valid) {
      if(!this.addAreaModal.isEdit){
        this.$store.dispatch('position/addNewArea', {marketId, name, parentId}).then(
          data => {
            console.log("add new area result", data)
            this.fetchAreas(marketId)
            this.addAreaModal.name = ""
            this.addAreaModal.posId = -1
            this.addAreaModal.parentId = -1
            this.addAreaModal.valueFloor = null
          }
        ).catch(err => {
          console.log("views-equipment-position-index.vue saveArea")
        })
      } else if(this.addAreaModal.isEdit){
        let posId = this.addAreaModal.posId
        let parentId = this.addAreaModal.valueFloor
        this.$store.dispatch('position/editArea', {posId, marketId, parentId, name}).then(
          data => {
            this.fetchAreas(marketId)
            this.addAreaModal.name = ""
            this.addAreaModal.posId = -1
            this.addAreaModal.parentId = -1
            this.addAreaModal.valueFloor = null
          }
        ).catch(err => {
          console.log("views-equipment-position-index.vue saveArea")
        })
      }
      this.addAreaModal.showDialog = false
       } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },

    fetchFloorsSelector(marketId) {
      this.$store.dispatch('position/fetchFloorsSelector', {marketId}).then(
        data => {
          console.log("floors", data)
          this.addAreaModal.floors = data
        }
      ).catch(err => {
        console.log("views-equipment-position-index.vue fetchFloors")
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
